<!-- 时间轴模块 -->
<section id="timeline" class="py-16 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-16">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?= $data['content']['sectionBadge'] ?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $data['content']['sectionTitle']?>
      </h2>
      <p class="text-dark/70">
        <?= $data['content']['sectionSubtitle']?>
      </p>
    </div>
    
    <div class="relative max-w-4xl mx-auto">
      <!-- 时间轴中心线 -->
      <div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-primary/20 transform -translate-x-1/2 z-0"></div>
      
      <!-- 时间节点列表 -->
      <div class="space-y-16 relative z-10">
        <?php foreach ($data['content']['events'] as $index => $event): ?>
        <?php $isEven = $index % 2 === 0; ?>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative">
          <!-- 图标节点 - 始终居中显示 -->
          <div class="hidden md:flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
            <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg">
              <i class="fa fa-<?= $event['icon'] ?? 'circle' ?>"></i>
            </div>
          </div>
          
          <!-- 移动端图标在顶部 -->
          <div class="md:hidden flex justify-center mb-4">
            <div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold text-base">
              <i class="fa fa-<?= $event['icon'] ?? 'circle' ?>"></i>
            </div>
          </div>
          
          <!-- 内容区域 -->
          <?php if ($isEven): ?>
          <div class="md:text-right md:pr-12">
            <div class="text-sm text-primary font-medium mb-2"><?= $event['year'] ?></div>
            <h3 class="text-xl font-bold mb-3"><?= $event['title'] ?></h3>
            <p class="text-dark/70">
              <?= $event['description'] ?>
            </p>
          </div>
          <div class="hidden md:block"></div>
          <?php else: ?>
          <div class="hidden md:block"></div>
          <div class="md:pl-12">
            <div class="text-sm text-primary font-medium mb-2"><?= $event['year'] ?></div>
            <h3 class="text-xl font-bold mb-3"><?= $event['title'] ?></h3>
            <p class="text-dark/70">
              <?= $event['description'] ?>
            </p>
          </div>
          <?php endif; ?>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>